<template>
  <div>
      <el-row>
            <el-button @click="getAllClassInfo(1)">默认查询</el-button>
            <el-button @click="getAllClassInfo(2)">我创建的</el-button>

            <el-input
            style="width:300px;margin:0 1.3%;"
            v-model="search"
            :placeholder="'输入班级名搜索'"/>

            <el-radio v-model="searchFilter" 
            :label="1" border 
            >搜索全部</el-radio>
            
            <el-radio style="margin-left:-2%" 
            v-model="searchFilter" 
            :label="2" border 
            >去除已关闭</el-radio>

      </el-row>
       <el-table
        :data="tableData.filter(data => !search || data.classRealName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;margin-top:2%;">
        <el-table-column
        label="班级ID"
        prop="classId">
        </el-table-column>
        <el-table-column
        label="学院"
        prop="classCollege">
        </el-table-column>
        <el-table-column
        min-width="130px"
        label="班级名">
            <template slot-scope="scope">
            <el-tag
            :type="scope.row.deleted === 1 ? 'danger':
            scope.row.belongTeaId === 1 ? 'warning' : 'primary'"
            effect="plain"
            disable-transitions>{{scope.row.classRealName}}</el-tag>
        </template>
        </el-table-column>

        <el-table-column
        label="班级URL"
        width="240px"
        >
        <template slot-scope="scope">
          {{host}}/api/class/bind/{{scope.row.classUrl}}
        </template>
        </el-table-column>

        <el-table-column
        label="创建者"
        width="80px"
        prop="teaName">
        </el-table-column>

        <el-table-column
        align="right"
        width="220px"
        label="可选操作">

        <template slot-scope="scope">
            <el-button
            round
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">进入<i class="el-icon-right"></i></el-button>
            <el-button
            round plain
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>关闭</el-button>
        </template>
        </el-table-column>
        
    </el-table>

  </div>
</template>

<script>
import * as API from '../../api/class/index'
import {Storage} from '../../storage'

export default {
    data() {
      return {
        host:'',
        teaId:'',
        tableData: [{
          // classId: 1001,
          // className: '3G软件1702',
          // createTeaName: 'suzyyy',
          // courseUrl: "http://localhost:8900/api/class/bind/626f41d76c8542f3b58b88b359ad1a37"
        }],
        search: "",
        searchFilter: 1,
        type:1,
      }
    },
    methods: {
      handleEdit(index, row) {
        if(row.deleted === 1) {
          this.$message.error("该课程已关闭！请注意！红色为已关闭！！！")
          return
        }
        this.$router.push({
          name: `/class/manage`,
          params: {
            classId: row.classId,
            classUrl: row.classUrl
          }
        })
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      searchChange(scope) {
        console.log(scope)
      },
      getAllClassInfo(type) {
        API.getAllClassInfo(type, this.searchFilter).then(res => {
          if(res.code == 100) {
            this.$message.error(res.data.error);
            return
          }

          this.tableData = res.data.classInfos

        }).catch(err => {
          this.$message.error("网络不太好啊！")
        })
      }
    },
    mounted() {
      let host = window.location.host;
      this.host = host
      this.teaId = Storage.get("tea").teaId
      this.getAllClassInfo(1)
      
    },
    watch: {
      searchFilter(val, oldVal) {
        this.getAllClassInfo(this.type)
      }
    }
}
</script>

<style>

</style>